<!--
 * @Author: tianhao
 * @Date: 2023-01-02 19:47:03
 * @LastEditTime: 2023-02-21 20:03:25
 * @LastEditors: tianhao
 * @Description: 
 * @FilePath: \dcollege\src\views\paper\details.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="top">
    <var-icon name="chevron-left" :size="30" class="ret" @click="fanHui()" />
    <div class="title">标题剩余人数</div>
    <div class="count">{{ $route.query.shengyu }}</div>
    <var-image src="./image/details.jpg" class="img"/>
  </div>
  <div class="dt">
    <div class="title2">{{ $route.query.title }}</div>
    <var-icon name="chevron-right" class="tubiao" />
    <div class="teacher">指导老师:</div>
    <div class="name">{{ $route.query.name }}</div>
    <var-divider class="fenge" :inset="36" />
    <div class="limit">人数限制:</div>
    <div class="count2">5人</div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
function fanHui() {
  router.go(-1);
}
</script>

<style lang="less" scoped>
.ret {
  position: absolute;
  float: left;
  margin-top: 30px;
}
.img {
  width: 100%;
  height: 240px;
}
.title {
  position: absolute;
  font-size: 20px;
  margin: 90px auto auto 20px;
  font-weight: bolder;
}
.count {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgb(66, 106, 237);
  margin: 140px auto auto 20px;
  border-radius: 5px;
  text-align: center;
  font-size: 27px;
  color: white;
}
.dt {
  position: absolute;
  width: 360px;
  height: 160px;
  background-color: white;
  margin: -10px auto auto 15px;
  border-radius: 10px;
  font-weight: bolder;
}
.title2 {
  position: absolute;
  margin: 20px auto auto 10px;
}
.tubiao {
  float: right;
  margin: 20px 10px auto auto;
}
.teacher {
  position: absolute;
  margin: 60px auto auto 10px;
  font-size: 13px;
  color: rgb(165, 169, 183);
}
.name {
  position: absolute;
  margin: 60px auto auto 280px;
  font-size: 15px;
  color: rgb(165, 169, 183);
}
.fenge {
  margin: 100px auto auto -25px;
}
.limit {
  position: absolute;
  margin: 15px auto auto 10px;
  font-size: 13px;
  color: rgb(165, 169, 183);
}
.count2 {
  position: absolute;
  margin: 15px auto auto 300px;
  font-size: 15px;
}
</style>
